<template>
	<view class="recharge-page">
		<u-navbar title="充值" :placeholder="true" :autoBack="true" bgColor="rgba(0,0,0,0.0)">
			<view slot="right" style="font-size: 26rpx;" @click="gojl">充值记录</view>
		</u-navbar>
		<view class="content">
			<view class="box">
				<view class="title">
					<view class="title-text">
						USDT地址
					</view>
				</view>
				<view class="item">
					{{usdt}}
					<u-icon name="file-text" color="#999" size="22" @click="gocopy(usdt)"></u-icon>
				</view>
				<view class="title">
					<view class="title-text">
						数额
					</view>
				</view>
				<view class="item">
					<u--input type="number" placeholder="请输入充值数额" border="none" v-model="num"></u--input>
				</view>
				<view class="title">
					<view class="title-text">
						转账网络
					</view>
				</view>
				<view class="item">
					<view class="item-tetx">
						TRC-20
					</view>
				</view>
				<view class="title">
					<view class="title-text">
						转账截图
					</view>
				</view>
				<view class="code" @click="goimgup">
					<u-icon name="plus" v-if="usdturl == ''" color="#999" size="50"></u-icon>
					<image v-else :src="usdturl" mode=""></image>
				</view>
				<view class="tips">
					充值数量限制：最低 <text>10个</text>,最高<text>5000个</text>
				</view>
			</view>
			<view class="btn">
				<u-button size="large" color="#fa922e" type="primary" text="确认充值" @click="gorechage"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usdt: '',
				num: '',
				show: false,
				meshwork: '',
				usdturl: ''
			}
		},
		onLoad() {
			this.getusdt()
		},
		methods: {
			getusdt(){
				this.$Request({
					method: 'GET',
					url: '/api/member/balance/usdtUrl',
					data: {},
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.usdt = res.msg
					}
				})
			},
			gojl(){
				uni.navigateTo({
					url:'/pages/manager/recharge-jl/index'
				})
			},
			gorechage() {
				if (this.num == '') {
					uni.showToast({
						title: '请输入充值数额！',
						icon: 'none'
					})
					return
				}
				if (this.usdturl == '') {
					uni.showToast({
						title: '请上传转账截图！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let parasm = {
					usdtNum: this.num,
					screenshotOfPayment: this.usdturl
				}
				this.$Request({
					method: 'POST',
					url: '/api/member/balance/rechargeApply',
					data: parasm,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.num = ''
						this.usdturl = ''
					}
				})
			},
			goimgup() {
				let app = this
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						const result = await app.uploadFilePromise(res.tempFilePaths[0])
						uni.hideLoading()
						app.usdturl = result
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://cx.iirl.top/api/profile/upload',
						filePath: url,
						name: 'file',
						header: {
							Authorization: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if (info.code == 200) {
								setTimeout(() => {
									resolve(info.msg)
								}, 1000)
							} else {
								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}
						}
					});
				})
			},
			gocopy(e) {
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败！',
							icon: 'none'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-page {
		min-height: calc(100vh - 91rpx);
		background-image: url('../../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.content {
			padding: 30rpx;

			.box {
				.title {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;

					.title-text {
						color: #333;
						font-weight: bold;
					}
				}

				.item {
					padding: 20rpx 30rpx;
					background-color: #fff;
					box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
					border-radius: 10px;
					margin: 30rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-tetx {
						font-size: 28rpx;
						color: #000000;
						padding: 5rpx 0;
					}

				}

				.code {
					width: 100%;
					height: 600rpx;
					background-color: #ffffff;
					box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
					padding: 20rpx;
					margin-top: 30rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;

					image {
						width: 500rpx;
						height: 500rpx;
						margin-top: 5%;
					}
				}

				.tips {
					font-size: 32rpx;
					margin-top: 30rpx;
					color: #333;

					text {
						color: #ff0000;
						font-weight: bold;
					}
				}
			}

			.btn {
				border-radius: 15px;
				overflow: hidden;
				margin-top: 50rpx;
			}
		}
	}
</style>